<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单例模式之简单的显示隐藏</title>
</head>
<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        var Mask = (function(){
            var instance = null;
            // 5.传入新内容
            return function(elem){
                if(instance){
                    // 第二次new时，调用show方法
                    instance.show(elem)
                    return instance;
                }
                instance = this;

                /* 因为实例对象只有一个，故不需要在原型上设置方法 */

                // 1.创建
                instance.createElement = function(){
                    this.ele = $('<div class="mask">');
                    this.ele.html(elem)
                    $('body').append(this.ele);
                }
                // 2.显示
                instance.show = function(str){
                    // 5.1 传入字符串或者标签内容
                    this.ele.html(str || elem);
                    this.ele.show();
                }

                // 3.绑定事件前先调用创建方法
                instance.createElement();
                // 4.绑定事件
                instance.ele.on('click',function(){
                    instance.ele.hide();
                })
            }
        })();

        new Mask('hello');
    </script>
</body>
</html>